<template>
  <!-- 企业微信 -->
  <div v-loading="pageLoad">
    <!-- 导航菜单 -->
    <div
      id="menu"
      style="margin: 0 15px 0 -10px; float: left"
      :style="{ width: menuWidth }"
    >
      <el-menu
        class="el-menu-vertical-demo"
        default-active="1-1"
        mode="vertical"
        style="height: 65vh"
      >
        <el-submenu
          v-for="(items, index) in menuList"
          :key="index + 1"
          :index="index + '1'"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ items.menu_name }}</span>
          </template>
          <el-menu-item-group
            v-for="(itemss, key) in items.children"
            :key="key"
          >
            <el-menu-item
              :index="index + 1 + '-' + key"
              @click="menu_key = itemss.menu_key"
            >
              {{ itemss.menu_name }}
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="2" @click="$emit('send')">
          <i class="el-icon-switch-button"></i>
          <span slot="title">返回</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 导航菜单选项组件 -->
    <div style="height: 65vh; overflow: hidden">
      <!-- 员工管理 -->
      <Users v-if="menu_key == 'User'" />
      <!-- 客服管理 -->
      <Service v-else-if="menu_key == 'Service'" />
      <!-- 聊天记录 -->
      <Chatlog v-else-if="menu_key == 'Chatlog'" />
      <!-- 基本设置 -->
      <Setting v-else-if="menu_key == 'Setting'" />
    </div>
  </div>
</template>

<script>
  import { getMenu } from '@/api/qw'

  export default {
    components: {
      Users: () => import('@/views/qywechat/user'),
      Service: () => import('@/views/qywechat/service'),
      Chatlog: () => import('@/views/qywechat/chatlog'),
      Setting: () => import('@/views/qywechat/setting'),
    },
    data() {
      return {
        pageLoad: false, // 控制加载样式显示隐藏
        menuWidth: '', // 用于固定导航菜单宽度
        menuList: [], // 存放菜单列表

        menu_key: '',
      }
    },
    mounted() {
      this.getMenuList()
    },
    methods: {
      // 获取菜单列表
      getMenuList() {
        this.pageLoad = true
        getMenu().then((res) => {
          this.menuList = res.data
          this.pageLoad = false
          // 初始化默认显示第一个
          this.menu_key = res.data[0].children['1'].menu_key
          // 等待界面更新，获取menu的宽度
          this.$nextTick(() => {
            this.menuWidth = document.querySelector('#menu').clientWidth + 'px'
          })
        })
      },
    },
  }
</script>

<style scoped></style>
